<template>
  <div class="personal-info">
      <div class="buttons">
          <el-button v-on:click="isEdit = !isEdit">{{isEdit? "取消": "编辑"}}</el-button>
      </div>
    <h3>个人信息</h3>
    <el-avatar class="avatar" :size="100" :src="imgURL"></el-avatar>
        <el-form label-position="left" label-width="80px" size="mini">
          <el-form-item label="用户ID">
              <el-input v-if="isEdit" v-model="userId"></el-input>
              <span v-else>
                  {{userId}}
              </span>
          </el-form-item>
          <el-form-item label="用户昵称">
              <el-input v-if="isEdit" v-model="username"></el-input>
              <span v-else>
                   {{username}}
              </span>

          </el-form-item>
          <el-form-item label="性别">
              <el-input v-if="isEdit" v-model="sex"></el-input>
              <span v-else>
                  {{sex}}
              </span>
          </el-form-item>
          <el-form-item label="手机号码">
              <el-input v-if="isEdit" v-model="phoneNumber"></el-input>
              <span v-else>
                  {{phoneNumber}}
              </span>
          </el-form-item>
          <el-form-item label="邮箱">
              <el-input v-if="isEdit" v-model="mail"></el-input>
              <span v-else>
                  {{mail}}
              </span>
          </el-form-item>
          <el-form-item label="个性签名">
              <el-input v-if="isEdit" v-model="signature"></el-input>
              <span v-else>
                  {{signature}}
              </span>
          </el-form-item>
          <el-form-item label="生日">
              <el-input v-if="isEdit" v-model="birthday"></el-input>
              <span v-else>
                  {{birthday}}
              </span>
          </el-form-item>
          <el-form-item label="上次登录">
              <el-input v-if="isEdit" v-model="lastLogin"></el-input>
              <span v-else>
                  {{lastLogin}}
              </span>
          </el-form-item>
          <el-form-item label="学校">
              <el-input v-if="isEdit" v-model="schoolName"></el-input>
              <span v-else>
                  {{schoolName}}
              </span>
          </el-form-item>
        </el-form>
      <el-button v-if="isEdit" type="primary">保存</el-button>
  </div>
</template>

<script>
export default {
  name: 'PersonalInfo',
  data () {
    return {
      imgURL: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      userId: 'zzmilktea',
      username: 'zz奶茶君',
      sex: '男',
      phoneNumber: '157****7375',
      signature: '生吃活人，我很抱歉',
      mail: 'zzmilktea@qq.com',
      birthday: '1024-10-24',
      lastLogin: '1024-10-24 10:24:01',
      groupName: '普通',
      groupDescribe: '普通用户组',
      schoolName: '南京林业大学',
      schoolNumber: '001',
      isEdit: false
    }
  },
  methods: {
  }
}
</script>

<style scoped>
.personal-info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-basis: auto;
}

.buttons {
    width: 100%;
}

    .avatar {
        margin: 1rem 0;
    }
</style>
